<template>
  <div id="layer" class="input-layer">
    <!-- 不动产印花 -->
    <div class="content" v-if="papersType == 1 && papersImgIndex == 1">
      <div class="input-item">
        <span>发证日期：</span>
        <input v-model="realLandinfoItem.get_land_date" type="text" placeholder="请输入发证日期" />
      </div>
      <div class="input-item">
        <span>编号：</span>
        <input v-model="realLandinfoItem.id_number" type="text" placeholder="请输入编号" />
      </div>
      <md-notice-bar class="tip" icon="warn" type="activity">请核实证件信息，如有错误请手动修改！</md-notice-bar>
      <div class="submit-item">
        <div class="btn" @click="savePropertyInfo">确认信息</div>
      </div>
    </div>
    <!-- 不动产详情 -->
    <div class="content" v-if="papersType == 1 && papersImgIndex == 2">
      <div class="input-item">
        <span>产权证号：</span>
        <input v-model="realLandinfoItem.certificate_number" type="text" placeholder="请输入产权证号" />
      </div>
      <div class="input-item">
        <span>权利人：</span>
        <input v-model="realLandinfoItem.obligee" type="text" placeholder="请输入权利人" />
      </div>
      <div class="input-item">
        <span>共有情况：</span>
        <input v-model="realLandinfoItem.common_onditions" type="text" placeholder="请输入共有情况" />
      </div>
      <div class="input-item">
        <span>坐落：</span>
        <input v-model="realLandinfoItem.be_located" type="text" placeholder="请输入坐落" />
      </div>
      <div class="input-item">
        <span>不动产单元号：</span>
        <input v-model="realLandinfoItem.unit_number" type="text" placeholder="请输入不动产单元号" />
      </div>
      <div class="input-item">
        <span>权利类型：</span>
        <input v-model="realLandinfoItem.purpose" type="text" placeholder="请输入权利类型" />
      </div>
      <div class="input-item">
        <span>权利性质：</span>
        <input v-model="realLandinfoItem.nature" type="text" placeholder="请输入权利性质" />
      </div>
      <div class="input-item">
        <span>用途：</span>
        <input v-model="realLandinfoItem.for_purpose" type="text" placeholder="请输入用途" />
      </div>
      <div class="input-item">
        <span>面积：</span>
        <input v-model="realLandinfoItem.built_up_area" type="text" placeholder="请输入面积" />
      </div>
      <div class="input-item">
        <span>使用期限：</span>
        <input v-model="realLandinfoItem.use_begin_date" type="text" placeholder="请输入使用期限" />
      </div>
      <div class="input-item">
        <span>其他状况1：</span>
        <input v-model="realLandinfoItem.other_params1" type="text" placeholder="请输入其他状况1" />
      </div>
      <div class="input-item">
        <span>其他状况2：</span>
        <input v-model="realLandinfoItem.other_params2" type="text" placeholder="请输入其他状况2" />
      </div>
      <div class="input-item">
        <span>其他状况3：</span>
        <input v-model="realLandinfoItem.other_params3" type="text" placeholder="请输入其他状况3" />
      </div>
      <div class="input-item">
        <span>其他状况4：</span>
        <input v-model="realLandinfoItem.other_params4" type="text" placeholder="请输入其他状况4" />
      </div>
      <md-notice-bar class="tip" icon="warn" type="activity">请核实证件信息，如有错误请手动修改！</md-notice-bar>
      <div class="submit-item">
        <div class="btn" @click="savePropertyInfo">确认信息</div>
      </div>
    </div>
    <!-- 厦国土印花 -->
    <div class="content" v-if="papersType == 3 && papersImgIndex == 1">
      <div class="input-item">
        <span>产权证号：</span>
        <input v-model="realLandinfoItem.certificate_number" type="text" placeholder="请输入产权证号" />
      </div>
      <md-notice-bar class="tip" icon="warn" type="activity">请核实证件信息，如有错误请手动修改！</md-notice-bar>
      <div class="submit-item">
        <div class="btn" @click="savePropertyInfo">确认信息</div>
      </div>
    </div>
    <!-- 厦国土详情 -->
    <div class="content" v-if="papersType == 3 && papersImgIndex == 2">
      <div class="input-item">
        <span>产权证的名称：</span>
        <input v-model="realLandinfoItem.name" type="text" placeholder="请输入产权证的名称" />
      </div>
      <div class="input-item">
        <span>权利人：</span>
        <input v-model="realLandinfoItem.obligee" type="text" placeholder="请输入权利人" />
      </div>
      <div class="input-item">
        <span>证件号码：</span>
        <input v-model="realLandinfoItem.id_card" type="text" placeholder="请输入证件号码" />
      </div>
      <div class="input-item">
        <span>房地坐落：</span>
        <input v-model="realLandinfoItem.be_located" type="text" placeholder="请输入房地坐落" />
      </div>
      <div class="input-item">
        <span>共有权情况：</span>
        <input v-model="realLandinfoItem.common_onditions" type="text" placeholder="请输入共有权情况" />
      </div>
      <div class="input-item">
        <span>使用权类型：</span>
        <input v-model="realLandinfoItem.purpose" type="text" placeholder="请输入使用权类型" />
      </div>
      <div class="input-item">
        <span>批准土地用途：</span>
        <input v-model="realLandinfoItem.for_purpose" type="text" placeholder="请输入批准土地用途" />
      </div>
      <div class="input-item">
        <span>批准使用期限：</span>
        <input v-model="realLandinfoItem.use_begin_date" type="text" placeholder="请输入批准使用期限" />
      </div>
      <div class="input-item">
        <span>总用地面积：</span>
        <input v-model="realLandinfoItem.floor_up_area" type="text" placeholder="请输入总用地面积" />
      </div>
      <md-notice-bar class="tip" icon="warn" type="activity">请核实证件信息，如有错误请手动修改！</md-notice-bar>
      <div class="submit-item">
        <div class="btn" @click="savePropertyInfo">确认信息</div>
      </div>
    </div>
    <!-- 厦国土面积 -->
    <div class="content" v-if="papersType == 3 && papersImgIndex == 3">
      <div class="input-item">
        <span>建筑面积：</span>
        <input v-model="realLandinfoItem.built_up_area" type="text" placeholder="请输入建筑面积" />
      </div>
      <div class="input-item">
        <span>总层数：</span>
        <input v-model="realLandinfoItem.number_plies" type="text" placeholder="请输入总层数" />
      </div>
      <div class="input-item">
        <span>室号或部位：</span>
        <input v-model="realLandinfoItem.number_room" type="text" placeholder="请输入室号或部位" />
      </div>
      <div class="input-item">
        <span>建筑结构：</span>
        <input v-model="realLandinfoItem.built_structure" type="text" placeholder="请输入建筑结构" />
      </div>
      <div class="input-item">
        <span>备注事项：</span>
        <input v-model="realLandinfoItem.remarks" type="text" placeholder="请输入备注事项" />
      </div>
      <div class="input-item">
        <span>登记机构：</span>
        <input v-model="realLandinfoItem.organization" type="text" placeholder="请输入登记机构" />
      </div>
      <div class="input-item">
        <span>填发日期：</span>
        <input v-model="realLandinfoItem.get_land_date" type="text" placeholder="请输入填发日期" />
      </div>
      <md-notice-bar class="tip" icon="warn" type="activity">请核实证件信息，如有错误请手动修改！</md-notice-bar>
      <div class="submit-item">
        <div class="btn" @click="savePropertyInfo">确认信息</div>
      </div>
    </div>
    <!-- 厦地房证印花 -->
    <div class="content" v-if="papersType == 2 && papersImgIndex == 1">
      <div class="input-item">
        <span>产权证号：</span>
        <input v-model="realLandinfoItem.certificate_number" type="text" placeholder="请输入产权证号" />
      </div>
      <md-notice-bar class="tip" icon="warn" type="activity">请核实证件信息，如有错误请手动修改！</md-notice-bar>
      <div class="submit-item">
        <div class="btn" @click="savePropertyInfo">确认信息</div>
      </div>
    </div>
    <!-- 厦地房证详情 -->
    <div class="content" v-if="papersType == 2 && papersImgIndex == 2">
      <div class="input-item">
        <span>权利人：</span>
        <input v-model="realLandinfoItem.obligee" type="text" placeholder="请输入权利人" />
      </div>
      <div class="input-item">
        <span>证件号码：</span>
        <input v-model="realLandinfoItem.id_card" type="text" placeholder="请输入证件号码" />
      </div>
      <div class="input-item">
        <span>共有权情况：</span>
        <input v-model="realLandinfoItem.common_onditions" type="text" placeholder="请输入共有权情况" />
      </div>
      <div class="input-item">
        <span>房地坐落：</span>
        <input v-model="realLandinfoItem.be_located" type="text" placeholder="请输入房地坐落" />
      </div>
      <div class="input-item">
        <span>使用权类型：</span>
        <input v-model="realLandinfoItem.purpose" type="text" placeholder="请输入使用权类型" />
      </div>
      <div class="input-item">
        <span>房屋所有权性质：</span>
        <input v-model="realLandinfoItem.nature" type="text" placeholder="请输入房屋所有权性质" />
      </div>
      <div class="input-item">
        <span>土地用途：</span>
        <input v-model="realLandinfoItem.for_purpose" type="text" placeholder="请输入批准土地用途" />
      </div>
      <div class="input-item">
        <span>批准使用期限：</span>
        <input v-model="realLandinfoItem.use_begin_date" type="text" placeholder="请输入批准使用期限" />
      </div>
      <md-notice-bar class="tip" icon="warn" type="activity">请核实证件信息，如有错误请手动修改！</md-notice-bar>
      <div class="submit-item">
        <div class="btn" @click="savePropertyInfo">确认信息</div>
      </div>
    </div>
    <!-- 厦地房证面积 -->
    <div class="content" v-if="papersType == 2 && papersImgIndex == 3">
      <div class="input-item">
        <span>宗地面积：</span>
        <input v-model="realLandinfoItem.unit_area" type="text" placeholder="请输入宗地面积" />
      </div>
      <div class="input-item">
        <span>其中分摊面积：</span>
        <input v-model="realLandinfoItem.apportion_area" type="text" placeholder="请输入其中分摊面积" />
      </div>
      <div class="input-item">
        <span>房号：</span>
        <input v-model="realLandinfoItem.number_room" type="text" placeholder="请输入房号" />
      </div>
      <div class="input-item">
        <span>建筑结构：</span>
        <input v-model="realLandinfoItem.built_structure" type="text" placeholder="请输入建筑结构" />
      </div>
      <div class="input-item">
        <span>层数：</span>
        <input v-model="realLandinfoItem.number_plies" type="text" placeholder="请输入层数" />
      </div>
      <div class="input-item">
        <span>层次：</span>
        <input v-model="realLandinfoItem.level_plies" type="text" placeholder="请输入层次" />
      </div>
      <div class="input-item">
        <span>建筑面积：</span>
        <input v-model="realLandinfoItem.built_up_area" type="text" placeholder="请输入建筑面积" />
      </div>
      <div class="input-item">
        <span>附记：</span>
        <input v-model="realLandinfoItem.remarks" type="text" placeholder="请输入附记" />
      </div>
      <div class="input-item">
        <span>填发日期：</span>
        <input v-model="realLandinfoItem.get_land_date" type="text" placeholder="请输入填发日期" />
      </div>
      <md-notice-bar class="tip" icon="warn" type="activity">请核实证件信息，如有错误请手动修改！</md-notice-bar>
      <div class="submit-item">
        <div class="btn" @click="savePropertyInfo">确认信息</div>
      </div>
    </div>
  </div>
</template>

<script>
import { NoticeBar, Toast } from "mand-mobile";

export default {
  components: {
    [NoticeBar.name]: NoticeBar
  },
  name: "layer",
  props: {
    papersType: {
      type: String,
      default: "1"
    },
    papersImgIndex: {
      type: Number,
      default: 1
    },
    // 产权证
    landinfoItem1: {
      type: Object,
      default: {
        get_land_date: "", //发证时间
        id_number: "", //编号
        certificate_number: "", //不动产权证号
        obligee: "", //权利人
        common_onditions: "", //共有情况
        be_located: "", //坐落
        unit_number: "", //不动产单元号
        purpose: "", //权利类型
        nature: "", //权利性质
        for_purpose: "", //用途
        built_up_area: "", //面积
        use_begin_date: "", //使用年限
        other_params1: "", //其他状况1
        other_params2: "", //其他状况2
        other_params3: "", //其他状况3
        other_params4: "" //其他状况4
      }
    },
    // 厦地房证
    landinfoItem2: {
      type: Object,
      default: {
        certificate_number: "", //不动产权证号

        obligee: "", //权利人
        id_card: "", //证件号码
        common_onditions: "", //共有情况
        be_located: "", //坐落
        nature: "", //权利性质
        for_purpose: "", //用途
        purpose: "", //权利类型
        use_begin_date: "", //使用年限

        built_structure: "", // 建筑结构
        number_room: "", // 房号 室号或部位
        level_plies: "", //层次
        number_plies: "", // 总层数
        get_land_date: "", // 填发日期
        unit_area: "", //宗地面积
        apportion_area: "", //分摊面积
        built_up_area: "", // 建筑面积
        remarks: "" // 附记 备注事项
      }
    },
    // 国土房证参数
    landinfoItem3: {
      type: Object,
      default: {
        name: "", //产权证的名称
        common_onditions: "", //共有情况
        id_card: "", //证件号码
        be_located: "", //坐落
        use_begin_date: "", //使用年限
        for_purpose: "", //用途
        obligee: "", //权利人
        purpose: "", //权利类型
        floor_up_area: "", //占地面积
        certificate_number: "", //不动产权证号

        get_land_date: "", // 填发日期
        built_up_area: "", // 建筑面积
        built_structure: "", // 建筑结构
        remarks: "", // 备注事项
        number_room: "", // 室号或部位
        organization: "", // 登记机构
        number_plies: "" // 总层数
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    realLandinfoItem: {
      get() {
        if (this.papersType == 1) {
          return this.landinfoItem1;
        } else if (this.papersType == 2) {
          return this.landinfoItem2;
        } else if (this.papersType == 3) {
          return this.landinfoItem3;
        }
      },
      set(val) {
        console.log(val);
        return this.$emit("setLandinfoItem", val);
      }
    }
  },
  methods: {
    // 保存信息
    savePropertyInfo() {
      let data = this.realLandinfoItem;
      this.$emit("savePropertyInfo", data);
    }
  },
  created() {}
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
.input-layer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  overflow: auto;
  .content {
    height: calc(100% - 20px);
    overflow: auto;
    padding: 20px 30px 0;
    .input-item {
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid #e8e8e8;
      padding-top: 10px;
      span {
        display: flex;
        align-items: center;
        height: 50px;
        font-size: 32px;
        color: #444;
        &::before {
          content: "";
          display: block;
          width: 6px;
          height: 32px;
          margin-right: 20px;
          background: $themeGold;
        }
      }
      input {
        height: 50px;
        border: none;
        outline: none;
        font-size: 32px;
        text-align: right;
      }
      input::-webkit-input-placeholder,
      textarea::-webkit-input-placeholder {
        color: #999;
        font-size: 26px;
      }

      input:-moz-placeholder,
      textarea:-moz-placeholder {
        color: #999;
        font-size: 26px;
      }

      input::-moz-placeholder,
      textarea::-moz-placeholder {
        color: #999;
        font-size: 26px;
      }

      input:-ms-input-placeholder,
      textarea:-ms-input-placeholder {
        color: #999;
        font-size: 26px;
      }
    }
    .tip {
      margin-top: 40px;
    }
    .submit-item {
      margin-top: 40px;
      margin-bottom: 60px;
      display: flex;
      justify-content: center;
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 250px;
        height: 80px;
        background: #2f86f6;
        color: #fff;
        border-radius: 50px;
        font-size: 30px;
      }
    }
  }
}
</style>
